<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RAMAnimatedTabBarDemo  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset='utf-8'>
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
  </head>
  <body>
    <a title="RAMAnimatedTabBarDemo  Reference"></a>
    <header>
      <div class="content-wrapper">
        <p><a href="index.html">RAMAnimatedTabBarDemo Docs</a> (100% documented)</p>
      </div>
    </header>
    <div class="content-wrapper">
      <p id="breadcrumbs">
        <a href="index.html">RAMAnimatedTabBarDemo Reference</a>
        <img id="carat" src="img/carat.png" />
        RAMAnimatedTabBarDemo  Reference
      </p>
    </div>
    <div class="content-wrapper">
      <nav class="sidebar">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a href="Classes.html">Classes</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Classes/RAMAnimatedTabBarController.html">RAMAnimatedTabBarController</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMAnimatedTabBarItem.html">RAMAnimatedTabBarItem</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMBounceAnimation.html">RAMBounceAnimation</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMFrameItemAnimation.html">RAMFrameItemAnimation</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMFumeAnimation.html">RAMFumeAnimation</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMItemAnimation.html">RAMItemAnimation</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMRotationAnimation.html">RAMRotationAnimation</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/RAMTransitionItemAnimations.html">RAMTransitionItemAnimations</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">
        <section>
          <section class="section">
            
            <p><img src="https://raw.githubusercontent.com/Ramotion/animated-tab-bar/master/header.png" alt="header"></p>
<a href='#ramanimatedtabbarcontroller' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h1 id='ramanimatedtabbarcontroller'>RAMAnimatedTabBarController</h1>

<p><a href="http://cocoapods.org/pods/RAMAnimatedTabBarController"><img src="https://img.shields.io/cocoapods/p/RAMAnimatedTabBarController.svg" alt="CocoaPods"></a>
<a href="http://cocoapods.org/pods/RAMAnimatedTabBarController"><img src="https://img.shields.io/cocoapods/v/RAMAnimatedTabBarController.svg" alt="CocoaPods"></a>
<a href="https://cdn.rawgit.com/Ramotion/animated-tab-bar/master/docs/index.html"><img src="https://img.shields.io/cocoapods/metrics/doc-percent/RAMAnimatedTabBarController.svg" alt="CocoaPods"></a>
<a href="https://github.com/Ramotion/animated-tab-bar"><img src="https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat" alt="Carthage compatible"></a>
<a href="http://twitter.com/Ramotion"><img src="https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat" alt="Twitter"></a>
<a href="https://travis-ci.org/Ramotion/animated-tab-bar"><img src="https://img.shields.io/travis/Ramotion/animated-tab-bar.svg" alt="Travis"></a></p>

<p>RAMAnimatedTabBarController is a Swift module for adding animation to tabbar items. It has pre-set of animations which we prepare for you, and ability to use any custom animation you want. With this module you can make your tabbar alive like our <a href="https://dribbble.com/shots/1766396-Animated-Tab-Bar-Icons?list=searches&amp;tag=ramotion&amp;offset=...">shot on dribbble</a>:</p>

<p><img src="https://raw.githubusercontent.com/Ramotion/animated-tab-bar/master/Screenshots/tab-bar-icons-iphone-ramotion-animation-interface-design.gif" alt="Animation"></p>

<p>The <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=animated-tab-bar">iPhone mockup</a> available <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=animated-tab-bar">here</a>.</p>

<p>Screencast from our Demo</p>

<p><img src="https://raw.githubusercontent.com/Ramotion/animated-tab-bar/master/Screenshots/RAMAnimatedTabBarDemo.gif" alt="Animation"></p>
<a href='#requirements' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='requirements'>Requirements</h2>

<ul>
<li>iOS 7.0+</li>
<li>Xcode 6.1</li>
</ul>
<a href='#installation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='installation'>Installation</h2>

<p>Just add the RAMAnimatedTabBarController folder to your project.</p>

<p>or use <a href="https://cocoapods.org">CocoaPods</a> with Podfile:
<code>ruby
pod &#39;RAMAnimatedTabBarController&#39;
</code></p>

<p>or <a href="https://github.com/Carthage/Carthage">Carthage</a> users can simply add to their <code>Cartfile</code>:
<code>
github &quot;Ramotion/animated-tab-bar&quot;
</code></p>
<a href='#usage' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='usage'>Usage</h2>

<ol>
<li><p>Create a new UITabBarController in your storyboard or nib.</p></li>
<li><p>Set the class of the UITabBarController to RAMAnimatedTabBarController in your Storyboard or nib.</p></li>
<li><p>For each UITabBarItem, set the class to RAMAnimatedTabBarItem.</p></li>
<li><p>Add a custom image icon for each RAMAnimatedTabBarItem</p></li>
<li><p>Add animation for each RAMAnimatedTabBarItem :</p>

<ul>
<li>drag and drop an NSObject item into your ViewController</li>
<li>set its class to ANIMATION_CLASS (where ANIMATION_CLASS is the class name of the animation you want to use)</li>
<li>connect the outlet animation in RAMAnimatedTabBarItem to your ANIMATION_CLASS
<a href="http://vimeo.com/112390386">Demonstration video for step 5</a></li>
</ul></li>
</ol>
<a href='#included_animations' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='included_animations'>Included Animations</h2>

<ul>
<li>RAMBounceAnimation</li>
<li>RAMLeftRotationAnimation</li>
<li>RAMRightRotationAnimation</li>
<li>RAMFlipLeftTransitionItemAnimations</li>
<li>RAMFlipRightTransitionItemAnimations</li>
<li>RAMFlipTopTransitionItemAnimations</li>
<li>RAMFlipBottomTransitionItemAnimations</li>
<li>RAMFrameItemAnimation</li>
<li>RAMFumeAnimation</li>
</ul>
<a href='#creating_custom_animations' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='creating_custom_animations'>Creating Custom Animations</h2>

<ol>
<li>Create a new class which inherits from RAMItemAnimation:</li>
</ol>
<pre class="highlight swift"><code>     <span class="kd">class</span> <span class="kt">NewAnimation</span> <span class="p">:</span> <span class="kt">RAMItemAnimation</span>
</code></pre>

<ol>
<li>Implement the methods in RAMItemAnimationProtocol:</li>
</ol>
<pre class="highlight swift"><code>    <span class="c1">// method call when Tab Bar Item is selected</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">playAnimation</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
      <span class="c1">// add animation</span>
    <span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code>    <span class="c1">// method call when Tab Bar Item is deselected</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">deselectAnimation</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">,</span> <span class="n">defaultTextColor</span> <span class="p">:</span> <span class="kt">UIColor</span><span class="p">)</span> <span class="p">{</span>
      <span class="c1">// add animation</span>
    <span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code>    <span class="c1">// method call when TabBarController did load</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">selectedState</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
      <span class="c1">// set selected state  </span>
    <span class="p">}</span>
</code></pre>

<ol>
<li>Example:</li>
</ol>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">RAMBounceAnimation</span> <span class="p">:</span> <span class="kt">RAMItemAnimation</span> <span class="p">{</span>

    <span class="k">override</span> <span class="kd">func</span> <span class="nf">playAnimation</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
        <span class="nf">playBounceAnimation</span><span class="p">(</span><span class="n">icon</span><span class="p">)</span>
        <span class="n">textLable</span><span class="o">.</span><span class="n">textColor</span> <span class="o">=</span> <span class="n">textSelectedColor</span>
    <span class="p">}</span>

    <span class="k">override</span> <span class="kd">func</span> <span class="nf">deselectAnimation</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">,</span> <span class="n">defaultTextColor</span> <span class="p">:</span> <span class="kt">UIColor</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">textLable</span><span class="o">.</span><span class="n">textColor</span> <span class="o">=</span> <span class="n">defaultTextColor</span>
    <span class="p">}</span>

    <span class="k">override</span> <span class="kd">func</span> <span class="nf">selectedState</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">,</span> <span class="nv">textLable</span> <span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">textLable</span><span class="o">.</span><span class="n">textColor</span> <span class="o">=</span> <span class="n">textSelectedColor</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">playBounceAnimation</span><span class="p">(</span><span class="nv">icon</span> <span class="p">:</span> <span class="kt">UIImageView</span><span class="p">)</span> <span class="p">{</span>

        <span class="k">let</span> <span class="nv">bounceAnimation</span> <span class="o">=</span> <span class="kt">CAKeyframeAnimation</span><span class="p">(</span><span class="nv">keyPath</span><span class="p">:</span> <span class="s">"transform.scale"</span><span class="p">)</span>
        <span class="n">bounceAnimation</span><span class="o">.</span><span class="n">values</span> <span class="o">=</span> <span class="p">[</span><span class="mf">1.0</span> <span class="p">,</span><span class="mf">1.4</span><span class="p">,</span> <span class="mf">0.9</span><span class="p">,</span> <span class="mf">1.15</span><span class="p">,</span> <span class="mf">0.95</span><span class="p">,</span> <span class="mf">1.02</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">]</span>
        <span class="n">bounceAnimation</span><span class="o">.</span><span class="n">duration</span> <span class="o">=</span> <span class="kt">NSTimeInterval</span><span class="p">(</span><span class="n">duration</span><span class="p">)</span>
        <span class="n">bounceAnimation</span><span class="o">.</span><span class="n">calculationMode</span> <span class="o">=</span> <span class="n">kCAAnimationCubic</span>

        <span class="n">icon</span><span class="o">.</span><span class="n">layer</span><span class="o">.</span><span class="nf">addAnimation</span><span class="p">(</span><span class="n">bounceAnimation</span><span class="p">,</span> <span class="nv">forKey</span><span class="p">:</span> <span class="s">"bounceAnimation"</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<a href='#about' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='about'>About</h2>

<p>The project maintained by <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=animated-tab-bar">app development agency</a> <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=animated-tab-bar">Ramotion Inc.</a>
See our other <a href="https://github.com/ramotion">open-source projects</a> or <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=animated-tab-bar">hire</a> us to design, develop, and grow your product.</p>

<p><a href="https://twitter.com/intent/tweet?text=https://github.com/ramotion/animated-tab-bar"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Twitter URL"></a>
<a href="https://twitter.com/ramotion"><img src="https://img.shields.io/twitter/follow/ramotion.svg?style=social" alt="Twitter Follow"></a></p>

          </section>
        </section>
        <section id="footer">
          <p>&copy; 2016 <a class="link" href="" target="_blank" rel="external">AlexKalinkin</a>. All rights reserved. (Last updated: 2016-06-10)</p>
          <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.5.0</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
        </section>
      </article>
    </div>
  </body>
</div>
</html>
